<template>
  <m-card :icon="icon" :title="title">
    <div class="nav" :class="title !== '精彩视频' ? 'jc-between' : ''">
      <div class="nav-item" :class="[active === i? 'active': '', title === '精彩视频' ? 'mr-5': '']"
        v-for="(category, i) in categories" :key="i" @click="$refs.list.$swiper.slideTo(i)">
        <div class="nav-link">{{ category.name }}</div>
      </div>
    </div>
    <div class="pt-2">
      <swiper ref="list" :options="{autoHeight:true,observer:true,observeParents:true}"
        @slide-change="() => (active = $refs.list.$swiper.activeIndex)">
        <swiper-slide v-for="(category, i) in categories" :key="i">
          <slot name="items" :category="category"></slot>
        </swiper-slide>
      </swiper>
    </div>
  </m-card>
</template>

<script>
export default {
  props: {
    icon: { type: String, required: true },
    title: { type: String, required: true },
    categories: { type: Array, required: true }
  },
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="scss"></style>
